<%-- 
Document   : index
Created on : Apr 21, 2012, 8:54:43 AM
Author     : BachLe
--%>

<%@page import="vn.ac.c0910g.assignment.Entity.Services"%>
<%@page import="vn.ac.c0910g.assignment.DAO.ServicesDAO"%>
<%@page import="java.util.List"%>
<%@page import="vn.ac.c0910g.assignment.Entity.Category"%>
<%@page import="vn.ac.c0910g.assignment.DAO.CategoryDAO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <%
        CategoryDAO cateDAO = new CategoryDAO();
        List<Category> listCate = cateDAO.getAllCategory();
        ServicesDAO servicesdao = new ServicesDAO();
        List<Services> listservice = servicesdao.getAllServices();
        
    %>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>E-commerce Webbsite</title>
        <link href="../resources/css/style.css" rel="stylesheet" type="text/css" />
        <script src="../resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/homeindex.js" type="text/javascript"></script>
    </head>

    <body>
        <div class="wrapper">
			<div class="content">
				<div id="form_wrapper" class="form_wrapper">
					<form class="register">
						<h3>Register</h3>
						<div class="column">
							<div>
								<label>Username:</label>
								<input type="text" id="uname"/>
								<span class="error">This is an error</span>
							</div>
							<div>
								<label>Password:</label>
								<input type="password" id="password"/>
								<span class="error">This is an error</span>
							</div>
							<div>
								<label>Fullname:</label>
								<input type="text" id="fname"/>
								<span class="error">This is an error</span>
							</div>
						</div>
						<div class="column">
							<div>
								<label>Address:</label>
								<input type="text" id="add"/>
								<span class="error">This is an error</span>
							</div>
							<div>
								<label>Email:</label>
								<input type="text" id="email" />
								<span class="error">This is an error</span>
							</div>
							<div>
								<label>Phone:</label>
								<input type="text" id="phone" />
								<span class="error">This is an error</span>
							</div>
						</div>
						<div class="bottom">
							<div class="remember">
								<input type="checkbox" id="ckbox"/>
								<span>Send me updates</span>
							</div>
							<input type="submit" value="Register" id="reg"/>
							<a href="#" rel="login" class="linkform">You have an account already? Log in here</a>
							<div class="clear"></div>
						</div>
					</form>
					<form class="login active">
						<h3>Login</h3>
						<div>
							<label>Username:</label>
							<input type="text" id="username"/>
							<span class="error">This is an error</span>
						</div>
						<div>
							<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
							<input type="password" id="pass"/>
							<span class="error">This is an error</span>
						</div>
						<div class="bottom">
							<div class="remember"><input type="checkbox" id="rem"/><span>Keep me logged in</span></div>
							<input type="submit" value="Login" id="submit">
							<a href="#" rel="register" class="linkform">You don't have an account yet? Register here</a>
							<div class="clear"></div>
						</div>
					</form>
					<form class="forgot_password">
						<h3>Forgot Password</h3>
						<div>
							<label>Username or Email:</label>
							<input type="text" id="forgot"/>
							<span class="error">This is an error</span>
						</div>
						<div class="bottom">
                                                        <input type="submit" value="Send reminder" id="send">
							<a href="#" rel="login" class="linkform">Suddenly remebered? Log in here</a>
							<a href="#" rel="register" class="linkform">You don't have an account? Register here</a>
							<div class="clear"></div>
						</div>
					</form>
				</div>
				<div class="clear"></div>
                                
			</div>
			<!--<a class="back" href="http://tympanus.net/codrops/2011/01/06/animated-form-switching/">back to the Codrops tutorial</a>-->
		</div>
        
        <div id="mainContent">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="outertable">
            <tr>
                <td style="padding-top:3px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="innertable">
                        <tr>
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="50%" style="padding-left:15px;"><img src="../resources/image/logo.jpg" width="325" height="37" /></td>

                                        <td width="50%" align="right" style="padding-right:10px;">
                                            <%if(session.getAttribute("username") != null){%>
                                                <table width="353" border="0" cellpadding="0" cellspacing="0" class="login-bg">
                                                    <tr>
                                                        <td width="11">&nbsp;</td>
                                                        <td width="335"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td colspan="4" height="8"></td>
                                                            </tr>
                                                            <tr>
                                                                <td>&nbsp;</td>
                                                                <td align="left" class="link1"><h3>Welcome <%=session.getAttribute("username")%> to our website</h3></td>
                                                                <td colspan="2" align="left" class="text1" style="padding-left:12px;"><a id="btnLogout">Logout</a></td>
                                                            </tr>
                                                        </table></td>
                                                    <td width="10">&nbsp;</td>
                                                    </tr>
                                                </table>
                                            <%}else{%>
                                            <table width="353" border="0" cellpadding="0" cellspacing="0" class="login-bg">
                                                <tr>
                                                    <td width="11">&nbsp;</td>
                                                    <td width="335"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td colspan="4" height="8"></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="width:60px;">&nbsp;</td>
                                                                <td align="left" class="link1"><strong><a id="btnLogin" class="link1">Signin</a></strong></td>
                                                                <td colspan="2" align="left" class="text1" style="padding-left:12px;">New User? <span class="link1"><a id="btnSignUp" class="link1">SignUp</a></span></td>
                                                            </tr>
                                                        </table></td>
                                                    <td width="10">&nbsp;</td>
                                                </tr>
                                            </table>
                                            <%}%>
                                        </td>
                                    </tr>
                                </table></td>
                        </tr>
                        <tr>
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="4"><img src="../resources/image/menu-left.jpg" width="4" height="33" /></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="menu-bg">
                                                <tr>
                                                    <td width="2%">&nbsp;</td>
                                                    <td width="96%" class="menu" align="center">
                                                        <a href="index.jsp">Home</a><span>&nbsp;</span>
                                                        <a href="aboutus.html">About Us </a><span>&nbsp;</span>
                                                        <a href="whatsnew.html">My Orders</a><span>&nbsp;</span>
                                                        <a href="products.html">Products</a><span>&nbsp;</span>
                                                        <a href="news.html">Projects</a><span>&nbsp;</span>
                                                        <a href="blog.html">Feedback</a><span>&nbsp;</span>
                                                        <a href="faq.html">FAQs</a><span>&nbsp;</span>
                                                        <a href="contactus.html"> Contact Us</a></td>
                                                    <td width="2%">&nbsp;</td>
                                                </tr>
                                            </table></td>
                                        <td width="4"><img src="../resources/image/menu-right.jpg" width="4" height="33" /></td>
                                    </tr>
                                </table></td>
                        </tr>
                        <tr>
                            <td style="padding-top:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                       <td width="64%"><img src="../resources/image/ban1.jpg" width="600" height="387" /></td>
                                        <td style="padding-left:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td><img src="../resources/image/ban2.jpg" width="168" height="231" /></td>
                                                    <td><img src="../resources/image/ban3.jpg" width="167" height="231" /></td>
                                                </tr>
                                                <tr>
                                                    <td><img src="../resources/image/ban4.jpg" width="167" height="156" /></td>
                                                    <td><img src="../resources/image/ban5.jpg" width="167" height="156" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                        <tr>
                            <td style="padding-top:10px;" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top"><table width="704" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="185"><table width="177" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                               <td class="blue-bg" height="32"><span class="heading1" style="padding-left:10px;">PRODUCTS BY </span></td>
                                                            </tr>
                                                            <tr>
                                                                <td height="3"></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" valign="top" class="grey-bg"><table width="162" border="0" cellpadding="0" cellspacing="0" >
                                                                       <%for(Category cate : listCate){%>
                                                                       <tr>
                                                                            <td width="13"><img src="../resources/image/arrow.jpg" width="5" height="9" /></td>
                                                                            <td width="149" align="left" class="link2"><a href="Categoryshow.jsp?id=<%=cate.getCategoryID()%>" class="link2"><%=cate.getCategoryName()%></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>&nbsp;</td>
                                                                            <td align="left" class="link2">&nbsp;</td>
                                                                        </tr>
                                                                        <%}%>
                                                                    </table></td>
                                                            </tr>
                                                        </table></td>
                                                    <td width="519" valign="top"><table width="519" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <% for(Services s:listservice){ if(listservice.indexOf(s)<=2){%>
                                                                <td>
                                                                    
                                                                    <table width="169" border="0" cellpadding="0" cellspacing="0" class="border1">
                                                                        <tr>
                                                                            <td align="center"><table width="156" border="0" cellspacing="0" cellpadding="0">
                                                                                    <tr>
                                                                                        <td height="29" colspan="2" align="left" class="heading2"><%=s.getServicesName()%></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="163" colspan="2"><img src="../resources/image/<%=s.getImagesSmall()%>" width="156" height="152" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td width="134" align="right" class="link2" ><a href="ProductDetail.jsp?id=<%=s.getServicesID()%>" class="link2">VIEW ALL </a></td>
                                                                                        <td width="22" align="right"><img src="../resources/image/arrow1.jpg" width="12" height="12" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="5"></td>
                                                                                    </tr>
                                                                                </table></td>
                                                                        </tr>
                                                                    </table>
                                                                  
                                                                </td>
                                                                  <%}}%>
                                                                
                                                            </tr>
                                                            <tr>
                                                                <td>&nbsp;</td>
                                                                <td>&nbsp;</td>
                                                                <td>&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="3" class="heading2">FEATURED PRODUCTS </td>
                                                            </tr>
                                                            <tr>
                                                                <td height="5"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><table width="169" border="0" cellpadding="0" cellspacing="0" class="border1">
                                                                        <tr>
                                                                            <td align="center"><table width="156" border="0" cellspacing="0" cellpadding="0">
                                                                                    <tr>
                                                                                        <td height="150" colspan="2" align="center" valign="middle"><img src="../resources/image/f1.jpg" width="144" height="139" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td width="134" height="5"></td>
                                                                                    </tr>
                                                                                </table></td>
                                                                        </tr>
                                                                    </table></td>
                                                                <td><table width="169" border="0" cellpadding="0" cellspacing="0" class="border1">
                                                                        <tr>
                                                                            <td align="center"><table width="156" border="0" cellspacing="0" cellpadding="0">
                                                                                    <tr>
                                                                                        <td height="150" colspan="2" align="center"><img src="../resources/image/f2.jpg" width="147" height="140" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td width="134" height="5"></td>
                                                                                    </tr>
                                                                                </table></td>
                                                                        </tr>
                                                                    </table></td>
                                                                <td><table width="169" border="0" cellpadding="0" cellspacing="0" class="border1">
                                                                        <tr>
                                                                            <td align="center"><table width="156" border="0" cellspacing="0" cellpadding="0">
                                                                                    <tr>
                                                                                        <td height="150" colspan="2" align="center"><img src="../resources/image/f3.jpg" width="146" height="141" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td width="134" height="5"></td>
                                                                                    </tr>
                                                                                </table></td>
                                                                        </tr>
                                                                    </table></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2"><table width="704" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td height="24" colspan="11" valign="top"><span class="heading2">FEATURED PRODUCTS </span></td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="11"><img src="../resources/image/h-line.jpg" width="704" height="1" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td height="8" colspan="11"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><img src="../resources/image/ff1.jpg" width="106" height="97" /></td>
                                                                <td><img src="../resources/image/vline.jpg" width="1" height="72" /></td>
                                                                <td><img src="../resources/image/ff2.jpg" width="106" height="97" /></td>
                                                                <td><img src="../resources/image/vline.jpg" width="1" height="72" /></td>
                                                                <td><img src="../resources/image/ff3.jpg" width="106" height="97" /></td>
                                                                <td><img src="../resources/image/vline.jpg" width="1" height="72" /></td>
                                                                <td><img src="../resources/image/ff4.jpg" width="106" height="97" /></td>
                                                                <td><img src="../resources/image/vline.jpg" width="1" height="72" /></td>
                                                                <td><img src="../resources/image/ff5.jpg" width="106" height="97" /></td>
                                                                <td><img src="../resources/image/vline.jpg" width="1" height="72" /></td>
                                                                <td><img src="../resources/image/ff6.jpg" width="106" height="97" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" class="text5">KITCHEN SETS </td>
                                                                <td>&nbsp;</td>
                                                                <td align="center" class="text5">KITCHEN UTENSILS </td>
                                                                <td>&nbsp;</td>
                                                                <td align="center" class="text5">KITCHEN UTENSILS </td>
                                                                <td>&nbsp;</td>
                                                                <td align="center"class="text5">KITCHEN UTENSILS</td>
                                                                <td>&nbsp;</td>
                                                                <td align="center" class="text5">KITCHEN SETS</td>
                                                                <td>&nbsp;</td>
                                                                <td align="center" class="text5">KITCHEN SETS</td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="11">&nbsp;</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td width="24%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td class="blue-bg" height="32" width="225"><span class="heading1" style="padding-left:5px;">NEWS</span></td>
                                                            </tr>
                                                            <tr>
                                                                <td height="275" align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="news-bg">
                                                                        <tr>
                                                                            <td align="center" valign="top"><table width="210" border="0" cellspacing="0" cellpadding="0">
                                                                                    <tr>
                                                                                        <td colspan="2" align="left" class="text2">12.04.09</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="66" colspan="2" align="left"><img src="../resources/image/news.jpg" width="110" height="55" /></td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="22" colspan="2" align="left" class="text3">History of Excellence </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="22" colspan="2" align="left" class="text2">New York - InteriorDesign.net </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td height="66" colspan="2" align="left" class="text4">reports that the Panton chair, developed by famed designer Verner Panton for Vitra, has arrived at its 50th anniversary.</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td width="178" align="right" class="link2"><a href="#" class="link2">READ MORE</a> </td>
                                                                                        <td width="32" align="center"><img src="../resources/image/arrow1.jpg" width="12" height="12" /></td>
                                                                                    </tr>
                                                                                </table></td>
                                                                        </tr>
                                                                    </table></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="kitchen-bg">
                                                            <tr>
                                                                <td align="right" style="padding-right:10px;"><table width="127" border="0" cellspacing="0" cellpadding="0">
                                                                        <tr>
                                                                            <td align="left" class="text1"><strong>Kitchen</strong><br />
                                                                                Find all the ingredients of dream kitchen for less</td>
                                                                        </tr>
                                                                    </table></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr>
                                                    <td>&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td><img src="../resources/image/add.jpg" width="226" height="149" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" valign="top">&nbsp;</td>
                                    </tr>
                                </table></td>
                        </tr>
                        <tr>
                            <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="footer-bg">
                                    <tr>
                                        <td height="25" align="center" valign="top" class="link2" style="padding-top:10px;">
                                            <a href="#" class="link2">Home</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">About Us</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">What&rsquo;s New</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">Products</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">Advertisement</a>&nbsp;| &nbsp;
                                            <a href="#" class="link2">News</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">Blog </a>&nbsp;| &nbsp;
                                            <a href="#" class="link2">Faq</a> &nbsp;| &nbsp;
                                            <a href="#" class="link2">Contact Us</a> &nbsp;| &nbsp;
                                            <a href="../Admin/login.jsp" class="link2">Admin</a><br/>
                                            <span class="text6"><p style="font:normal 11px arial; color:#b1b1b1; display:inline;">Brought by </p><a href="http://www.globaltemplates.com/" style="font-size:11px;color:#b1b1b1"> Free Website Templates</a></span></td>
                                    </tr>
                                    <tr>
                                        <td align="center" valign="top" class="text6">&nbsp;</td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table></td>
            </tr>
        </table>
        <div id="backgroundPopup"></div>
        </div>
       
        <!-- The JavaScript -->

		<script type="text/javascript">
			jQuery(function() {
					//the form wrapper (includes all forms)
				var $form_wrapper	= jQuery('#form_wrapper'),
					//the current form is the one with class active
					$currentForm	= $form_wrapper.children('form.active'),
					//the change form links
					$linkform		= $form_wrapper.find('.linkform');

				//get width and height of each form and store them for later
				$form_wrapper.children('form').each(function(i){
					var $theForm	= jQuery(this);
					//solve the inline display none problem when using fadeIn fadeOut
					if(!$theForm.hasClass('active'))
						$theForm.hide();
					$theForm.data({
						width	: $theForm.width(),
						height	: $theForm.height()
					});
				});

				//set width and height of wrapper (same of current form)
				setWrapperWidth();

				/*
				clicking a link (change form event) in the form
				makes the current form hide.
				The wrapper animates its width and height to the
				width and height of the new current form.
				After the animation, the new form is shown
				*/
				$linkform.bind('click',function(e){
					var $link	= jQuery(this);
					var target	= $link.attr('rel');
					//setWrapperWidth();
					$currentForm.fadeOut(400,function(){
						//remove class active from current form
						$currentForm.removeClass('active');
						//new current form
						$currentForm= $form_wrapper.children('form.'+target);
						//animate the wrapper
						$form_wrapper.stop()
									 .animate({
										width	: $currentForm.data('width') + 'px',
										height	: $currentForm.data('height') + 'px'
									 },500,function(){
										//new form gets class active
										$currentForm.addClass('active');
										//show the new form
										$currentForm.fadeIn(400);
									 });
					});
					e.preventDefault();
				});

				function setWrapperWidth(){
					$form_wrapper.css({
						width	: $currentForm.data('width') + 'px',
						height	: $currentForm.data('height') + 'px'
					});
				}

				/*
				for the demo we disabled the submit buttons
				if you submit the form, you need to check the
				which form was submited, and give the class active
				to the form you want to show
				*/
				$form_wrapper.find('input[type="submit"]')
							 .click(function(e){
								e.preventDefault();
							 });
			});
        </script>
    
    </body>
</html>
